import { Link } from 'react-router-dom';
import { useLanguage } from '../contexts/LanguageContext';
import { useLocalizedLink } from '../hooks/useLocalizedLink';
import { Facebook, Send } from 'lucide-react';

// Custom X (Twitter) icon component
const XIcon = ({ className }: { className?: string }) => (
  <svg 
    viewBox="0 0 24 24" 
    className={className}
    fill="currentColor"
    aria-hidden="true"
  >
    <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
  </svg>
);

const Footer = () => {
  const { t, language } = useLanguage();
  const { getLink } = useLocalizedLink();
  
  const isZhCN = language === 'zh-CN';

  return (
    <footer className="bg-[#0f1c3f] dark:bg-gray-900 text-white py-12 transition-colors duration-300">
      <div className="container mx-auto px-4">
        <div className="grid grid-cols-1 md:grid-cols-5 gap-8">
          <div className="md:col-span-2">
            <Link to={getLink('/')} className="flex items-center">
              <span className="text-2xl font-bold text-[#00d4ff]">kernel</span>
              <span className="text-2xl font-bold">Proxy</span>
            </Link>
            <p className="mt-4 text-gray-300">
              {t('footer.description')}
            </p>
            
            {/* Social Media Links */}
            <div className="mt-6">
              <div className="flex space-x-4">
                <a
                  href="https://t.me/kernelproxy"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-gray-300 hover:text-[#00d4ff] transition-colors"
                  aria-label="Telegram"
                >
                  <Send className="w-6 h-6" />
                </a>
                <a
                  href="https://x.com/kernelproxy"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-gray-300 hover:text-[#00d4ff] transition-colors"
                  aria-label="X"
                >
                  <XIcon className="w-6 h-6" />
                </a>
                <a
                  href="https://facebook.com/kernelproxy"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-gray-300 hover:text-[#00d4ff] transition-colors"
                  aria-label="Facebook"
                >
                  <Facebook className="w-6 h-6" />
                </a>
              </div>
            </div>
          </div>
          <div>
            <h3 className="text-lg font-semibold mb-4">{t('footer.products')}</h3>
            <ul className="space-y-2">
              <li>
                <Link to={getLink('/pricing')} className="text-gray-300 hover:text-[#00d4ff]">
                  {t('nav.pricing')}
                </Link>
              </li>
              <li>
                <Link to={getLink('/documentation')} className="text-gray-300 hover:text-[#00d4ff]">
                  {t('nav.documentation')}
                </Link>
              </li>
            </ul>
          </div>
          <div>
            <h3 className="text-lg font-semibold mb-4">{t('footer.company')}</h3>
            <ul className="space-y-2">
              <li>
                <Link to={getLink('/about')} className="text-gray-300 hover:text-[#00d4ff]">
                  {isZhCN ? '关于我们' : 'About Us'}
                </Link>
              </li>
              <li>
                <Link to={getLink('/blog')} className="text-gray-300 hover:text-[#00d4ff]">
                  {t('nav.blog')}
                </Link>
              </li>
              <li>
                <Link to={getLink('/support')} className="text-gray-300 hover:text-[#00d4ff]">
                  {t('nav.support')}
                </Link>
              </li>
            </ul>
          </div>
          <div>
            <h3 className="text-lg font-semibold mb-4">{isZhCN ? '法律信息' : 'Legal'}</h3>
            <ul className="space-y-2">
              <li>
                <Link to={getLink('/terms-of-service')} className="text-gray-300 hover:text-[#00d4ff]">
                  {isZhCN ? '服务条款' : 'Terms of Service'}
                </Link>
              </li>
              <li>
                <Link to={getLink('/privacy-policy')} className="text-gray-300 hover:text-[#00d4ff]">
                  {isZhCN ? '隐私政策' : 'Privacy Policy'}
                </Link>
              </li>
            </ul>
          </div>
        </div>
        <div className="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
           {new Date().getFullYear()} kernelProxy. {t('footer.allRightsReserved')}
        </div>
      </div>
    </footer>
  );
};

export default Footer;
